<template>
  <div>
    <div class="header">
      <div>
        <span class="iconfont icon-yonghu" style="font-size:20px;margin-right:10px"></span>
        <span>广西壮族自治区</span>
      </div>
      <div>医疗救治定点医院和发热门诊一览</div>
    </div>
    <div class="content">
      <div style="width:150px">
        <el-input placeholder='请输入医院名称' v-model="obj.name"></el-input>
      </div>
      <div @click='toMap(item)' class="item" v-for='item in hospitalList' :key='item.id'>
        <div class="left">
          <div>{{item.name}}</div>
          <div v-if="item.flags">{{item.flags}}</div>
          <div v-else>暂无标记</div>
          <div>{{item.province +' '+ item.city +' '+ item.area}}</div>
        </div>
        <div class="right">
          <div><i class="iconfont icon-dingwei-" style="font-size:25px"></i></div>
          <div>{{GetDistance(item.latitude,item.longitude)}} KM</div>
        </div>
      </div>
    </div>

  </div>
</template>

<style scoped>
  .font-icon {
    width: 2em;
    height: 2em;
    fill: currentColor;
    overflow: hidden;
  }

  .content .right div:first-child {
    padding: 20px;

  }

  .content .item .left div:last-child {
    color: #999999;
    font-size: 14px;
  }

  .content .item .left div:nth-child(2) {
    background-color: #ffb341;
    border-radius: 5px;
    font-size: 12px;
    display: inline;
    padding: 5px;
    color: white;
  }

  .content .item .right div {
    height: 60px;
    line-height: 60px;
  }

  .content .item .left div {
    height: 40px;
    line-height: 40px;
  }

  .content .item {
    margin-top: 10px;
    border-bottom: 1px solid #cccccc;
    height: 120px;
    padding: 0 20px;
  }

  .content .left {
    float: left;
  }

  .content .right {
    float: right;
  }

  .header {
    height: 150px;
    width: 100%;
    background-image: url('http://39.96.21.48/2020_znn/visual-ui/static/img/bg1.efce26ef.png');
    background-size: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }

  .header div {
    position: absolute;
    font-size: 20px;
    color: white;
    font-weight: 800;
  }

  .header div:first-child {
    top: 20%;
    left: 2%;

  }

  .header div:last-child {
    top: 55%;
    left: 2%;

  }

  .content {
    margin-top: 160px;
  }

</style>

<script>
  import {
    mapActions,
    mapState
  } from 'vuex';
  export default {
    watch: {
      obj: {
        handle: function () {
          this.findAllHospital(this.obj)
        },
      }
    },
    data() {
      return {
        obj: {
          page: 1,
          pageSize: 100
        },
        lat: 0,
        lng: 0,
      }
    },
    computed: {
      ...mapState('hospital', ['hospitalList'])
    },
    methods: {
      // 方法定义 lat,lng 
      // 根据您经纬度计算距离
      GetDistance(lat1, lng1) {
        var radLat1 = lat1 * Math.PI / 180.0;
        var radLat2 = this.lat * Math.PI / 180.0;
        var a = radLat1 - radLat2;
        var b = lng1 * Math.PI / 180.0 - this.lng * Math.PI / 180.0;
        var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) +
          Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2)));
        s = s * 6378.137; // EARTH_RADIUS;
        s = Math.round(s * 10000) / 10000;
        return s;
      },
      //获取当前位置
      getLocation() {
        navigator.geolocation.getCurrentPosition((res) => {
          this.lat = res.coords.latitude;
          this.lng = res.coords.longitude;
        }, (error) => {

        }, {
          enableHighAccuracy: true, //高精度定位
          timeout: 5000,
          maximumAge: 0
        });
      },
      ...mapActions('hospital', ['findAllHospital']),
      toMap(val) {
        console.log(val)
        this.$router.push({
          path: '/hospital/detail',
          query: {
            one: val.latitude,
            two: val.longitude
          }
        })
      }
    },
    created() {
      this.findAllHospital(this.obj);
      this.getLocation()
    }
  }

</script>
